<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 屏幕宽度和设备一致  初始缩放比例(百分百打开)  最大缩放比例  和禁止用户缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maxinum-scale=1,
    user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03表单和图片</title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">    
</head>
<body style="margin:50px">

    <!-- form-inline  内联表单 所有表单元素居于一行  当超过768px自动换行 -->
    <form class="form-horizontal">  
        <!-- form-group 给行与行之间很好的间距 has-success设置成功状态 -->
        <div class="form-group has-success">
            <label class="col-sm-2 control-label">电子邮件</label>
            <!-- form-control 给文本框移入有边框的样式 -->
            <div class="col-sm-10">
                <input type="email" class="form-control" placeholder="请输入您的电子邮件">
            </div>
        </div>
        
        <div class="form-group has-error">
            <label class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" placeholder="请输入您的密码">
            </div>
        </div>
    </form>
    
        
        <!-- 表单合组  前后增加片段 -->
        <div class="input-group">
            <div class="input-group-addon">￥</div>
            <input type="text" class="form-control" placeholder="请输入您的价格">
            <div class="input-group-addon">.00</div>
        </div> 

        <!-- 设置复选框  各自在一行 -->
        <div class="checkbox">
            <label>
                <input type="checkbox">体育
            </label>     
        </div>

        <div class="checkbox">
            <label>
                <input type="checkbox">英语
            </label>
        </div>

        <!-- 设置复选框内联样式   还有禁用样式 -->
        <label class="checkbox-inline disabled">
            <input type="checkbox" disabled>体育
        </label>
        <label class="checkbox-inline">
            <input type="checkbox">英语
        </label>
        <label class="radio-inline">
            <input type="radio">男
        </label>
        
        <!-- 设置下拉列表 -->
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>

        <!-- 添加额外的图标 文本框右侧内置文本图标 -->
        <div class="form-group has-success has-feedback">
            <label class="control-label">电子邮件</label>
            <input type="email" class="form-control input-lg" placeholder="请输入您的电子邮件">
            <!--  glyphicon-ok 成功的样式 -->
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
        

        <!-- 设置图片的形状样式 -->
        <!-- <img src="../img/cwt.jpg" alt="图片" class="img-rounded"> -->
        <!-- <img src="../img/cwt.jpg" alt="图片" class="img-circle"> -->
        <!-- <img src="../img/cwt.jpg" alt="图片" class="img-thumbnail"> -->

        <!-- 响应式图片 -->
        <!-- <img src="../img/cwt.jpg" alt="图片" class="img-responsive"> -->
        

        <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
        <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
</body>
</html>